---
title: Spinner
package: "@chakra-ui/spinner"
image: "components/spinner.svg"
description:
  Spinners provide a visual cue that an action is processing awaiting a course
  of change or a result.
---

Spinners provide a visual cue that an action is either processing, awaiting a
course of change or a result.

<ComponentLinks
  theme={{ componentName: "spinner" }}
  github={{ package: "spinner" }}
  npm={{ package: "@chakra-ui/spinner" }}
/>

<carbon-ad></carbon-ad>

## Import

```js
import { Spinner } from "@chakra-ui/react"
```

## Usage

```jsx
<Spinner />
```

### Spinner with Color

```jsx
<Spinner color="red.500" />
```

### Spinner with different size

```jsx
<Stack direction="row" spacing={4}>
  <Spinner size="xs" />
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</Stack>
```

### Spinner with empty area color

```jsx
<Spinner
  thickness="4px"
  speed="0.65s"
  emptyColor="gray.200"
  color="blue.500"
  size="xl"
/>
```

## Props

<PropsTable of="Spinner" />
